<html>
	<head>
		<title>课程搜索</title>
		<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layui/layui.js"></script>
		<style type="text/css">
			#layui-layer-iframe1{
				height: 400px ! important ;
			}
		</style>
	</head>
	<body>
		<div class="layui-col-xs10 layui-col-xs-offset1" style="margin-top: 50px;">
			<div class="layui-col-xs8 layui-col-xs-offset2">
				<div class="layui-col-xs8">
					<input class="layui-input" type="text" id="courseId">
				</div>
				<div class="layui-col-xs4">
					<button type="button" class="layui-btn" onclick="search()">搜索</button>
				</div>
			</div>
			<div class="layui-col-xs12" style="background-color: #F2F2F2;margin-top: 50px;display: none;" id="result">
				<div class="layui-col-xs12" style="font-size: 30px;margin-left: 10px;">
					<b><a id="name"></a></b>
				</div>
				<div class="layui-col-xs12" style="margin-top: 10px;margin-left: 10px;">
					<div>课程描述：</div>
					<div id="description" style="height: 90px;"></div>
				</div>
				<div class="layui-col-xs12" style="margin-bottom: 10px;margin-left: 10px;">
					<div class="layui-col-xs4">
						<button class="layui-btn" id="teacher" type="button">课程老师</button>
					</div>
					<div class="layui-col-xs8">
						<button  type="button" id="add" class="layui-btn">加入课程</button>
						<span id="msg" style="color: red;"></span>
					</div>
				</div>
			</div>
			<div class="layui-col-xs12" style="background-color: #F2F2F2;margin-top: 50px;display: none;" id="hint">
				<h1>课程不存在</h1>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var teacher = '';
		$("#teacher").on('click', function(){
			layui.use('layer', function(){
				var layer = layui.layer;
				layer.open({
				      type: 2,
				      title: '教师信息',
				      shadeClose: true,
				      shade: false,
				      maxmin: true, //开启最大化最小化按钮
				      area: ['600px', '400px'],
				      content: 'teacher/info?username='+teacher
				    }); 
			})
		});
		function search(){
			var courseId = $("#courseId").val();
			$.getJSON('course/search', {
				id: courseId
			}, function(res){
				if(res.code == '00000'){
					$("#hint").hide();
					$("#result").show();
					$("#name").text(res.data.name);
					$("#description").text(res.data.description);
					teacher = res.data.teacherUsername;
					var allow = res.data.allow;
					var add = $("#add");
					if(!allow){
						$("#msg").text("无法加入");
						add.attr("disabled", true);
						add.addClass("layui-btn-disabled");
					}else{
						$("#msg").text("");
						add.attr("disabled", false);
						add.removeClass("layui-btn-disabled");
						add.on("click", function(){
							var id = res.data.id;
							$.getJSON('course/join', {
								id: id
							}, function(res){
								layui.use('layer', function(){
									var layer = layui.layer;
									if(res.code == '00000'){
										layer.msg('加入成功')
									}else if(res.code == 'A0506'){
										layer.alert('请勿重复添加')
									}else{
										layer.alert('加入失败，请联系管理员')
									}
								});
							})
						});
					}
				}else{
					$("#hint").show();
					$("#result").hide();
				}
			})
		}
	</script>
</html>